<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Event事件学习</title>
		<link rel="stylesheet" type="text/css" href="./style.css"/>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<!-- 使用Vue要把这个script文件导入进来 -->
	</head>
	<body>
		<h1>Event事件</h1>
		<div id="vue-app">
			<p>My age is {{age}}</p>
			<button type="button" @click="add(1)">加</button>
			<!-- @click中可以直接对age进行++或者--操作，但是这样不建议在实战中使用 -->
			<button type="button" @click="down(1)">减</button>
			<!-- 标签内部使用函数的需要加上（），属性内使用函数，如果不用传参就不用加（），如果传参，则需要加上（）并在（）内进行传参 -->
			<button type="button" @dblclick="add(10)">双击按钮加10</button>
			<button type="button" @dblclick="down(10)">双击按钮减10</button>
			<!-- dblclick是只有双击才会触发的函数 -->
			
			<div id="canvas"  @mousemove="get_position">
				<!-- 停止mousemove的方式有两种，一种直接stop，一种是绑定函数，函数中停止 -->
				<!-- <p @mousemove.stop="">({{X}},{{Y}}) - 停止记录位置</p>-->
				 <p @mousemove="stopMove">({{X}},{{Y}}) - 停止记录位置</p>
			</div>
			
			<!-- prevent阻止了默认标签事件，比如a标签的跳转网页 -->
			<a href="https://www.baidu.com" @click="a_goto">跳转到百度！</a>
			<a href="https://www.baidu.com" @click.prevent="a_goto">不跳转到百度！</a>
			
			
			<div class="input_name">
				<h1>姓名</h1>
				<input type="text" name="user_name" v-on:keyup.enter = "iptName" />
				<h1>年龄</h1>
				<input type="text" name="user_age" v-on:keyup.enter="iptAge"/>
				<!-- enter表示按下键盘回车时候才会触发，还可以进行组合：keyup.alt.enter就表示Alt+enter一起按 -->
			</div>
			
			
			<!-- 双向数据绑定 -->
			<div class="model">
				<h1>信息：</h1>
				<input type="text" name="user_name" ref="msg" v-on:keyup = "model_input" />
				<p>信息内容：{{msg}}</p>
			</div>
			
			<div id="computed_test">
				<h1>computed计算属性</h1>
				<button type="button" v-on:click="aaa++">add a</button>
				<button type="button" v-on:click="bbb++">add b</button>
				<p>a + {{aaa}}</p>
				<p>b + {{bbb}}</p>
				<p>age + a = {{addToA}}</p>
				<p>age + b = {{addToB}}</p>
			</div>
			
		</div>
		
		
		
	</body>
	<script type="text/javascript" src="app.js">
		
	</script>
</html>
